From: Khalid Abu Shawarib <khalid.shawarib@gmail.com>
Date: Wed, 6 Sep 2023 13:30:19 +0000 (+0300)
Subject: slider: Reverse handle direction in RTL
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~312^2^2~6
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=405b549a0547c8af0ee7665d6534907f57f6a7f5;p=gnome-shell.git

slider: Reverse handle direction in RTL

Rework slider handle to reverse directions when the slider is
Right-to-Left.

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5107
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2943>
---

diff --git a/js/ui/slider.js b/js/ui/slider.js
index 410fc5013..42f464b71 100644
--- a/js/ui/slider.js
+++ b/js/ui/slider.js
@@ -37,6 +37,7 @@ export const Slider = GObject.registerClass({
         let cr = this.get_context();
         let themeNode = this.get_theme_node();
         let [width, height] = this.get_surface_size();
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
 
         let handleRadius = themeNode.get_length('-slider-handle-radius');
 
@@ -45,10 +46,13 @@ export const Slider = GObject.registerClass({
             themeNode.lookup_color('-slider-handle-border-color', false);
 
         const ceiledHandleRadius = Math.ceil(handleRadius + handleBorderWidth);
-        const handleX = ceiledHandleRadius +
-            (width - 2 * ceiledHandleRadius) * this._value / this._maxValue;
         const handleY = height / 2;
 
+        let handleX = ceiledHandleRadius +
+            (width - 2 * ceiledHandleRadius) * this._value / this._maxValue;
+        if (rtl)
+            handleX = width - handleX;
+
         let color = themeNode.get_foreground_color();
         Clutter.cairo_set_source_color(cr, color);
         cr.arc(handleX, handleY, handleRadius, 0, 2 * Math.PI);
@@ -189,9 +193,13 @@ export const Slider = GObject.registerClass({
     _moveHandle(absX, _absY) {
         let relX, sliderX;
         [sliderX] = this.get_transformed_position();
+        const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
+        let width = this._barLevelWidth;
+
         relX = absX - sliderX;
+        if (rtl)
+            relX = width - relX;
 
-        let width = this._barLevelWidth;
         let handleRadius = this.get_theme_node().get_length('-slider-handle-radius');
 
         let newvalue;